<template>
    <text>{{ dateShow }}</text>
</template>

<script>
import { friendlyDate } from "./date-format.js";
/**
 * Dateformat 日期格式化
 * @description 日期格式化组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3279
 * @property {Object|String|Number} date 日期对象/日期字符串/时间戳
 * @property {String} locale 格式化使用的语言
 * 	@value zh 中文
 * 	@value en 英文
 * @property {Array} threshold 应用不同类型格式化的阈值
 * @property {String} format 输出日期字符串时的格式
 */
export default {
    name: "UniDateformat",
    props: {
        date: {
            type: [Object, String, Number],
            default() {
                return "-";
            }
        },
        locale: {
            type: String,
            default: "zh"
        },
        threshold: {
            type: Array,
            default() {
                return [0, 0];
            }
        },
        format: {
            type: String,
            default: "yyyy/MM/dd hh:mm:ss"
        },
        // refreshRate使用不当可能导致性能问题，谨慎使用
        refreshRate: {
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            refreshMark: 0
        };
    },
    computed: {
        dateShow() {
            this.refreshMark;
            return friendlyDate(this.date, {
                locale: this.locale,
                threshold: this.threshold,
                format: this.format
            });
        }
    },
    watch: {
        refreshRate: {
            handler() {
                this.setAutoRefresh();
            },
            immediate: true
        }
    },
    methods: {
        refresh() {
            this.refreshMark++;
        },
        setAutoRefresh() {
            clearInterval(this.refreshInterval);
            if (this.refreshRate) {
                this.refreshInterval = setInterval(() => {
                    this.refresh();
                }, parseInt(this.refreshRate));
            }
        }
    }
};
</script>

<style></style>
